<template>
  <view class="content">
    <wd-cell :title="userName" icon="user" clickable size="large">
      <template #default>
        <view v-if="isLogin" class="logout-btn" @tap="handleLogin">
          {{ isLogin ? '退出登录' : '登录' }}
        </view>
      </template>
    </wd-cell>

    <wd-grid :column="2" clickable :gutter="5" border>
      <wd-grid-item
        use-slot
        link-type="navigateTo"
        :url="`/pages/${item.url}/${item.url}`"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <view>
          <view class="icon-wrapper">
            <wd-icon :name="item.icon" size="24" :color="item.color" />
          </view>
          <text class="label">{{ item.label }}</text>
        </view>
      </wd-grid-item>
    </wd-grid>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMemberStore } from '@/store'

import LoginApi from '@/api/api'
import { useToast } from 'wot-design-uni'

const memberStore = useMemberStore()
const userName = ref('未登录')
const isLogin = ref(false)
const toast = useToast()
interface MenuItem {
  icon: string
  label: string
  url: string
  color: string
}
const menuList = ref<MenuItem[]>([
  {
    icon: 'wallet',
    label: '收货',
    url: 'goodsReceipt',
    color: '#4CAF50',
  },
  {
    icon: 'setting1',
    label: '粗加工',
    url: 'binding',
    color: '#4CAF50',
  },
  {
    icon: 'camera',
    label: '质检',
    url: 'qualityInspection',
    color: '#2196F3',
  },
  {
    icon: 'upload',
    label: '出库',
    url: 'outOfStock',
    color: '#FF9800',
  },
  {
    icon: 'download',
    label: '入库',
    url: 'inOfStock',
    color: '#E91E63',
  },
  {
    icon: 'calendar',
    label: '盘库',
    url: 'checkStock',
    color: '#9C27B0',
  },
  // {
  //   icon: 'calendar',
  //   label: '测hi是',
  //   url: 'about',
  //   color: '#9C27B0',
  // },
])

// 登录or退出登录
const handleLogin = () => {
  if (isLogin.value) {
    // 退出登录
    LoginApi.logOut().then((res) => {
      isLogin.value = false
      toast.success('退出登录成功')
      uni.reLaunch({
        url: '/pages/login/login',
      })
    })
  } else {
    // 登录
    isLogin.value = true
  }
}
onLoad((op) => {
  const profile = memberStore.getProfile()
  console.log(profile)
  userName.value = profile?.name || '未登录'
  isLogin.value = !!profile
})
</script>

<style scoped>
/* .content {
  padding: 15px;
} */
/* >>> .wd-grid-item__content {
  background: linear-gradient(to right, #ff7e5f, #feb47b) !important;
} */
</style>
